<template>
	<div class="category_mgmt">
		<Navbar></Navbar>
		<div class="g-content">
			<div class="buttons">
				<el-button class="store-button2 add mb-20" @click="add">
					<i class="iconfont icon-tianjia f12"></i>
					<span>添加品牌</span>
				</el-button>
			</div>
			<div class="edit-content">
				<brandList :BrandList="brand_list" @deleteRow="deleteRow" @emptyDelt="emptyDelt" @edit="edit" @changeSort="changeRowSort"></brandList>
			</div>
		</div>
		<brandEdit :show="isEdited" @cancel="cancel" @save="save" :id="id"></brandEdit>
	</div>
	</div>
</template>

<script>
	import Navbar from "@/components/commodity/Navbar"
	import brandList from "@/components/commodity/brand_list"
	import brandEdit from "@/components/commodity/brand_edit"
	import { getBrandList,changeSort } from "@/api/commodity"

	export default {
		name: "category_mgmt",
		data() {
			return {
				isEdited: false,
				brand_list: [],
				shop_id: "",
				arr: [],
				isEmptyDelt:true,
				id: 0,
				index: -1
			}
		},
		created() {
			this.shop_id = this.$store.getters.getShop_id
			this.getList()
		},
		components: {
			Navbar,
			brandList,
			brandEdit
		},
		methods: {
			emptyDelt(data){
				this.isEmptyDelt=data
			},
			cancel() {
				this.isEdited = false
				this.index = -1
				this.id = 0
				this.defaultData()
			},
			add() {
				this.isEdited = true
			},
			edit(index) {
				this.index = index
				this.id = this.brand_list[index].id
				this.isEdited = true;
			},
			save() {
				this.getList()
			},
			deleteRow(){
				this.getList()
			},
			changeRowSort(ids) {
				changeSort({ids:ids}).then((res)=>{
					this.getList()
					this.$message('处理成功')
				}).catch((err)=>{
					this.$message('处理失败')
				})
			},
			defaultData() {
				this.data = {
					image_url: '',
					brand_name: '',
					brand_introduction: ''
				}
			},
			getList() {
				getBrandList().then((res)=>{
					this.brand_list = res.data
				}).catch((error)=>{
					this.$message('服务器错误,请联系管理员')
				})
			}
		}
	}
</script>

<style lang="scss">
	.category_mgmt {
		margin-top: 110px;
		.category_manage {
			color: #0070C9;
			font-weight: bold;
		}
		>.g-content {
			width: 1200px;
			min-height: 204px;
			border-radius: 4px;
			background: #fff;
			margin: 0 auto;
			padding: 20px;
			>.buttons {
				text-align: left;
				overflow: auto;
				>.el-button {
					width: 92px;
					height: 32px;
					border-radius: 2px;
				}
				>.save {
					background: rgba(0, 112, 201, 1);
					border-color: #0070C9;
					&:hover {
						border-color: #007DE3;
						background: #007DE3;
					}
					&:active {
						border-color: #005396;
						background: #005396;
					}
					span {
						color: #fff;
					}
				}
				>.remove {
					span {
						color: #B4282D;
					}
					&:hover {
						background: #B4282D;
						border-color: #B4282D;
						span {
							color: #FFFFFF;
						}
					}
					&:active {
						background: #821D20;
						border-color: #821D20;
						span {
							color: #FFFFFF;
						}
					}
				}
				>.save,
				>.edit {
					float: right;
				}
			}
			.edit-content {
				width: 1200px;
			}
		}
	}
</style>